<template>
	<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
		<view class="box-wp" v-if="list.length>0">
			<u-checkbox-group size="30" placement="column" v-model="checkValue">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="main">
						<view class="left">
							<u--image :src="item.pic" width="160rpx" height="160rpx" mode="aspectFill"></u--image>
						</view>
						<view class="right goods">
							<view class="title u-line-1">
								{{item.prodName}}
							</view>
							<view class="cont-price">
								<view class="goods-price">
									￥{{item.price}}
								</view>

							</view>
						</view>
						<view class="check-box">
							<u-checkbox :disabled="disabledCheck(item.id)" style="width: 40rpx;" iconSize="26"
								:name="item.id"></u-checkbox>
						</view>
					</view>

				</view>
			</u-checkbox-group>
		</view>
		<u-empty marginTop="50" mode="list" textSize="30" iconSize="70" v-else>
		</u-empty>
		<view class="bottom-box">
			<u-button :throttleTime="800" @click="submit" :custom-style="{
				  background: '#276aee',
				  color: '#fff',
				  width: '682rpx',
				  border:'none'
				}">完成</u-button>
		</view>

	</scroll-view>

</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				pageNo: 1,
				total: 0,
				pageSize: 20,
				msGiftProdList: [],
				checkValue: ''
			}
		},
		onLoad(opt) {
			// console.log(opt, 'opt');
			this.msGiftProdList = JSON.parse(opt.list) || [] //已添加商品数据
		},
		onShow() {
			this.getList(1)
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			//已选择商品不能再次选择
			disabledCheck(id) {
				if (this.msGiftProdList.findIndex(item => item.id == id) == -1) {
					return false
				} else {
					return true
				}
			},

			submit() {
				if (this.checkValue.length > 0) {
					let pages = getCurrentPages(); // 获取当前页面栈
					let prePage = pages[pages.length - 2]; // 上一个页面
					let arr = [],
						arr2 = []
					this.checkValue.map(i => {
						let t = this.list.find(item => item.id == i)
						arr.push(t)
					})
					arr2 = [...this.msGiftProdList, ...arr]
					//修改上级页面数据 已经存在的数据不变 ,直接复制
					prePage.$vm.msGiftProdList = arr2
				}
				uni.navigateBack({
					delta: 1
				})
			},
			async getList(arg) {
				uni.showLoading({})
				if (arg == 1) {
					this.pageNo = 1
					this.list = []
					this.total = 0
				}
				const {
					openId
				} = this.userInfo
				let res = await this.$api.getGoodsList({
					openId,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: 1
				})
				if (res.success) {
					let arr = [...this.list, ...res.result.records]
					this.list = arr.map(item => {
						item.totalStocks = 1
						return item
					})
					this.total = res.result.total
				} else {
					this.list = []
					this.total = 0
				}
				uni.hideLoading()
			},
			reachBottom() {
				if (this.pageNo * this.pageSize > this.total) {
					uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				} else {
					this.pageNo++
					this.getList()
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.box-wp {
		overflow: auto;
		background-color: #f6f8fa;
		height: calc(100vh - 190rpx);
		padding-bottom: 210rpx;
		padding-top: 32rpx;

		.item {
			border-radius: 16rpx;
			background-color: #fff;
			margin: 32rpx;
			padding: 20rpx;
			margin-top: 0;



			.main {
				display: flex;
				justify-content: space-between;

				.check-box {
					align-self: center;
					width: 100rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
				}

				.left {
					margin-top: 5rpx;
					margin-right: 32rpx;

					image {
						border-radius: 5rpx;
						width: 140rpx;
						height: 140rpx;
					}
				}

				.right {
					height: 100%;

					.title {
						overflow: hidden;
						width: 420rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
					}

					.cont-price {

						height: 70rpx;
						display: flex;
						align-items: center;

						.count {
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #86909C;
							line-height: 39rpx;
						}

						.goods-tag {
							border-radius: 6rpx;
							border: 1rpx solid #FF7D00;
							padding: 4rpx 10rpx;
							margin-left: 20rpx;
							text-align: center;
							width: 100rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #FF7D00;
							line-height: 28rpx;

						}

						.goods-price {
							color: #FF3131;
							font-size: 34rpx;
						}
					}

					.option-btn-wp {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.option-btn {
							text-align: center;
							width: 112rpx;
							height: 48rpx;
							border-radius: 200rpx 200rpx 200rpx 200rpx;
							opacity: 1;
							border: 2rpx solid #86909C;
							font-size: 24rpx;
							font-weight: 400;
							color: #86909C;
							line-height: 48rpx;
							margin-left: 20rpx;

						}


					}




				}
			}

			.bottom {
				.sell-box {
					margin-top: 24rpx;

					.sell-box-name {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #4E5969;
						line-height: 39rpx;
					}

					.sell-box-name2 {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 39rpx;
					}
				}

				.time-box {
					margin-top: 24rpx;

					.time {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #86909C;
						line-height: 39rpx;
					}

					.detail {
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #276AEE;
						line-height: 39rpx;
					}
				}

			}




		}



	}
</style>